<script setup lang="jsx">
import { ref, onMounted, nextTick,unref } from 'vue'
import { DraggableModal } from '@/components/core/draggable-modal'
import { getAuthStatus } from '@/api/home'

const props = defineProps({
  insuredInfo: {
    type: Object,
    required: () => {}
  },
  policyInfo: {
    type: Object,
    required: () => {}
  }
})
console.log(props.insuredInfo, props.policyInfo)

const emit = defineEmits(['updateVisible'])

const loading = ref(false)
const weatchData = ref(null)



async function initData(type) {
  const { insuredId } = unref(props.policyInfo)
  let res = null
  const data = { insureId: insuredId }
  try {
    res = await getAuthStatus(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    weatchData.value = res?.data || {}
  }
}

const weatchVisible = ref(false)
onMounted(async () => {
  await nextTick()
  weatchVisible.value = true
  initData()
})

function getState(key) {
  return key === '01' ? '#91AE6E' : '#CF595D'
}

function handleCancel() {
  weatchVisible.value = false
  emit('updateVisible', false)
}
</script>
<template>
  <DraggableModal
    :showCloseIcon="true"
    :footer="null"
    @cancel="handleCancel"
    v-model:open="weatchVisible"
    width="850px"
    title="欣服务功能开通状态"
  >
    <div class="main-header">
      <p class="member-id">会员ID：{{ insuredInfo.memberId }}</p>
      <p class="remark">功能“启用”仅代表用户配置了使用权限，不代表用户当前可用</p>
    </div>
    <div class="main-content">
      <a-descriptions
        bordered
        :labelStyle="{ width: '200px', background: '#FAFBFB' }"
        :contentStyle="{ width: '200px' }"
        :column="2"
      >
        <a-descriptions-item label="登录"
          ><a-badge
            :color="getState(weatchData?.loginPermStatusCode)"
            :text="weatchData?.loginPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="理赔申请"
          ><a-badge :color="getState(weatchData?.claimApplPermStatusCode)" :text="weatchData?.claimApplPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="理赔查询"
          ><a-badge :color="getState(weatchData?.claimSrchPermStatusCode)" :text="weatchData?.claimSrchPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="资料下载"
          ><a-badge :color="getState(weatchData?.downloadPermStatusCode)" :text="weatchData?.downloadPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="合作医院"
          ><a-badge :color="getState(weatchData?.otherProvPermStatusCode)" :text="weatchData?.otherProvPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="医院查询">
          <a-badge :color="getState(weatchData?.hospitalSrchPermStatusCode)" :text="weatchData?.hospitalSrchPermStatusCodeName" />
        </a-descriptions-item>
        <a-descriptions-item label="就诊预约(首页入口)"
          ><a-badge :color="getState(weatchData?.appointmentHomePgPermStatusCode)" :text="weatchData?.appointmentHomePgPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="授权申请(首页入口)"
          ><a-badge :color="getState(weatchData?.preAuthHomePgPermStatusCode)" :text="weatchData?.preAuthHomePgPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="自付金额"
          ><a-badge :color="getState(weatchData?.obpermStatusCode)" :text="weatchData?.obpermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="授权申请(医院入口)"
          ><a-badge :color="getState(weatchData?.preAuthHospPgPermStatusCode)" :text="weatchData?.preAuthHospPgPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="就诊预约(医院入口)"
          ><a-badge :color="getState(weatchData?.appointmentHospPgPermStatusCode)" :text="weatchData?.appointmentHospPgPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="智能客服"
          ><a-badge :color="getState(weatchData?.aicspermStatusCode)" :text="weatchData?.aicspermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="我的保单"
          ><a-badge :color="getState(weatchData?.policyInfoPermStatusCode)" :text="weatchData?.policyInfoPermStatusCodeName"
        /></a-descriptions-item>
        <a-descriptions-item label="慢病送药"
          ><a-badge :color="getState(weatchData?.pharmacyDlvryPermStatusCode)" :text="weatchData?.pharmacyDlvryPermStatusCodeName"
        /></a-descriptions-item>
      </a-descriptions>
    </div>
  </DraggableModal>
</template>
<style lang="scss" scoped>
.ant-col-5 {
  flex: 0 0 20%;
  max-width: 20%;
}
.main-header {
  margin-bottom: 20px;
  .member-id {
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .remark {
    font-weight: 500;
    font-size: 14px;
    color: #666666;
  }
}
.main-content {
  padding-bottom: 20px;
}
</style>
